<template>
    <div>
        <Header :active="type" :type="true" />
        <div class="content">
            <div class="content_view">
                <div class="lemon-sidebar__scroll left_view">
                    <div class="user_info">
                        <img :src="shop_info.image" alt="" class="avatar">
                        <div class="other">
                            <div class="name">{{ shop_info.name }}</div>
                            <div class="address">{{ $t('mall.商户地址') }}：{{ shop_info.address }}</div>
                        </div>
                        <div class="btn" @click="follow" v-if="is_follow">
                            {{ $t('mall.已关注') }}
                        </div>
                        <div class="btn" @click="follow" v-else>
                            +{{ $t('mall.关注') }}
                        </div>
                    </div>
                    <!-- <img :src="cover" alt="" class="max_cover"> -->
                    <div class="max_cover">
                        <el-carousel :interval="4000" type="card" height="400px">
                            <el-carousel-item v-for="(item, index) in images" :key="index">
                                <img :src="item" alt="" class="max_cover">
                            </el-carousel-item>
                        </el-carousel>
                    </div>

                    <div class="more">
                        <div class="title">{{ $t('mall.店铺推荐') }}</div>
                        <div class="list">
                            <div class="item" v-for="(item, index) in list" :key="index">
                                <img :src="item.images[0] || ''" alt="" class="cover">
                                <div class="name">{{ item.name }}</div>
                                <div class="other">
                                    <div class="price">
                                        <div class="unit">￥</div>
                                        <div class="value">{{ item.price }}</div>
                                    </div>
                                    <div class="submit" @click="change(item)">
                                        {{ $t('msg.查看') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right_view">
                    <div class="mall_name">{{ res.name }}</div>
                    <div class="other">
                        <div class="price">
                            <div class="unit">￥</div>
                            <div class="value">{{ res.price }}</div>
                        </div>
                        <div class="number">{{ $t('mall.已售') }}：{{ res.sales }}</div>
                    </div>
                    <div class="oper">
                        <div>
                            <span class="key">{{ $t('mall.库存') }}</span>
                            <span class="value">{{ res.stock }}</span>
                        </div>
                        <el-input-number v-model="quantity" :min="1" :max="res.stock"></el-input-number>
                    </div>

                    <div class="footer">
                        <div class="cell_view">
                            <div class="cell" @click="openChat">
                                <img src="@/assets/image/call.png" alt="">
                                <span>{{ $t('mall.客服') }}</span>
                            </div>
                            <div class="cell" @click="favorite">
                                <img src="@/assets/image/x2.png" alt="" v-if="is_favorite">
                                <img src="@/assets/image/x1.png" alt="" v-else>
                                <span>{{ $t('mall.收藏') }}</span>
                            </div>
                        </div>
                        <!-- <div class="submit" @click="submit" v-if="type == 'buy'">{{ $t('mall.立即购买') }}</div>
                        <div class="submit" @click="submit" v-else>{{ $t('mall.立即出售') }}</div> -->

                        <div class="submit" @click="submit" v-if="res.type == 'sell'">{{ $t('mall.立即购买') }}</div>
                        <div class="submit" @click="submit" v-else>{{ $t('mall.立即出售') }}</div>



                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Header from "@/components/mall/Header.vue"
import { mapState } from "vuex";
export default {
    components: {
        Header
    },
    data() {
        return {
            type: "buy",
            id: "",
            product_id: "",

            cover: "",
            images: [],
            shop_info: {},

            res: {},

            is_follow: false,
            is_favorite: false,
            quantity: 1,

            list: [],
        }
    },

    computed: {
        shop_id() {
            return this.product_id || this.id
        },
        ...mapState({
            user: state => state.user,
            allContacts: state => state.allContacts
        })
    },
    created() {
        this.id = this.$route.query.id;
        // this.type = this.$route.query.type;
        this.getDeta();
    },
    methods: {
        async getDeta() {
            let res = await this.$api.shopApi.detail({
                id: this.shop_id
            });
            let data = res;
            this.res = data;
            this.type = data.type;
            this.images = data.images;
            this.shop_info = data.shop_info;
            this.is_favorite = data.is_favorite;
            this.is_follow = data.shop_info.is_follow;
            this.list = data.recommend_goods;
        },

        async follow() {
            let shop_id = this.shop_info.id;
            let is_follow = this.is_follow;

            if (is_follow) {
                await this.$api.shopApi.unfollow({
                    shop_id
                });
            } else {
                await this.$api.shopApi.follow({
                    shop_id
                });
            }
            this.is_follow = !this.is_follow;
            this.$message({
                message: this.$t('mall.操作成功'),
                type: 'success'
            });
        },
        async favorite() {
            let is_favorite = this.is_favorite;

            if (is_favorite) {
                await this.$api.shopApi.unfavorite({
                    goods_id: this.id
                });
            } else {
                await this.$api.shopApi.favorite({
                    goods_id: this.id
                });
            }
            this.is_favorite = !this.is_favorite;
            this.$message({
                message: this.$t('mall.操作成功'),
                type: 'success'
            });
        },
        change(item) {
            this.product_id = item.id;
            this.getDeta();
        },

        async openChat() {
            let { user } = await this.$api.chatApi.searchUser({
                user_id: this.res.user_id
            });
            let im_id = user.im_user_id;
            if (im_id == this.user.im_user_id) {
                this.$message({
                    message: this.$t('mall.不能私信自己'),
                    type: 'warning'
                });
                return
            };
            let contact = this.allContacts.find(item => item.user_id == im_id);

            this.$store.commit('changeChatUser', contact);
            setTimeout(() => {
                this.$router.replace({
                    name: 'message'
                })
            }, 100)
        },

        async submit() {
            await this.$api.shopApi.createOrder({
                shop_id: this.res.shop_id,
                goods_id: this.id,
                quantity: this.quantity,
                code: ""
            });

            this.$message({
                message: this.$t('mall.操作成功'),
                type: 'success'
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.content {
    height: calc(100vh - 92px);
    padding: 0 160px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
}

.content_view {
    flex: 1;
    display: flex;
    overflow: hidden;
    padding-top: 20px;
    box-sizing: border-box;

    .left_view {
        flex: 1;
        overflow-y: auto;

        .user_info {
            display: flex;
            align-items: center;

            .avatar {
                width: 52px;
                height: 52px;
                border-radius: 4px 4px 4px 4px;
            }

            .other {
                height: 52px;
                padding: 5px 65px 5px 10px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .name {
                    font-weight: bold;
                    font-size: 16px;
                    color: #333333;
                }

                .address {
                    font-size: 12px;
                    color: #7F7F7F;
                }
            }

            .btn {
                width: 58px;
                height: 28px;
                line-height: 28px;
                text-align: center;
                font-size: 12px;
                color: #FFFFFF;
                background: linear-gradient(270deg, #4488FF 0%, #2BBCFF 100%);
                border-radius: 5px 5px 5px 5px;
                cursor: pointer;
            }
        }

        .max_cover {
            width: 100%;
            height: 400px;
            // height: auto;
            margin: 20px 0 24px;
        }

        .more {
            border-radius: 10px;
            padding: 24px 16px;
            box-sizing: border-box;
            background: #FFFFFF;

            .title {
                width: 80px;
                font-weight: bold;
                font-size: 20px;
                color: #333333;
                position: relative;

                &::after {
                    content: "";
                    width: 44px;
                    height: 6px;
                    background: #2273FF;
                    border-radius: 3px 3px 3px 3px;
                    position: absolute;
                    left: 50%;
                    bottom: -14px;
                    z-index: 2;
                    transform: translateX(-50%);
                }
            }

            .list {
                padding-top: 24px;
                box-sizing: border-box;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;

                .item {
                    width: 244px;
                    margin-bottom: 18px;
                    // margin-right: 20px;

                    .cover {
                        width: 244px;
                        height: 244px;
                        border-radius: 20px;
                    }

                    .name {
                        height: 44px;
                        line-height: 22px;
                        font-size: 16px;
                        color: #000000;
                        margin: 7px 0;
                        box-sizing: content-box;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        /* 显示的行数 */
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .other {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .price {
                            display: flex;
                            align-items: baseline;

                            .unit {
                                font-weight: bold;
                                font-size: 16px;
                                color: #FA5151;
                            }

                            .value {
                                font-weight: bold;
                                font-size: 24px;
                                color: #FA5151;
                            }
                        }

                        .submit {
                            width: 72px;
                            height: 36px;
                            line-height: 36px;
                            text-align: center;
                            font-size: 16px;
                            color: #FFFFFF;
                            background: linear-gradient(270deg, #4488FF 0%, #2BBCFF 100%);
                            border-radius: 66px 66px 66px 66px;
                            cursor: pointer;
                        }
                    }
                }
            }
        }


    }

    .right_view {
        width: 592px;
        // height: 100%;
        margin-left: 24px;
        padding: 24px 24px 92px;
        box-sizing: border-box;
        background: #FCFCFE;
        position: relative;

        .mall_name {
            color: #333333;
            font-weight: bold;
            font-size: 20px;
        }

        .other {
            margin: 20px 0 88px;
            display: flex;
            justify-content: space-between;

            .price {
                display: flex;
                align-items: baseline;

                .unit {
                    font-weight: bold;
                    font-size: 24px;
                    color: #FA5151;
                }

                .value {
                    font-weight: bold;
                    font-size: 32px;
                    color: #FA5151;
                }
            }

            .number {
                font-weight: bold;
                font-size: 14px;
                color: #7F7F7F;
            }
        }

        .oper {
            display: flex;
            justify-content: space-between;
            align-items: center;

            div {
                display: flex;
                align-items: center;

                .key {
                    font-size: 16px;
                    color: #333333;
                }

                .value {
                    font-size: 16px;
                    color: #9A9A9A;
                    margin-left: 10px;
                }
            }
        }

        .footer {
            width: 100%;
            height: 92px;
            padding: 12px 24px 18px;
            box-sizing: border-box;
            background: #FCFCFE;
            box-shadow: inset 0px 1px 0px 0px rgba(104, 104, 104, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 2;

            .cell_view {
                width: 116px;
                padding-right: 24px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;

                .cell {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    img {
                        width: 34px;
                        height: 34px;
                    }

                    span {
                        font-size: 14px;
                        color: #333333;
                        margin-top: 8px;
                    }
                }
            }

            .submit {
                flex: 1;
                height: 52px;
                line-height: 52px;
                text-align: center;
                font-weight: bold;
                font-size: 20px;
                color: #FFFFFF;
                background: linear-gradient(270deg, #4488FF 0%, #2BBCFF 100%);
                border-radius: 8px 8px 8px 8px;
                cursor: pointer;
            }
        }
    }
}
</style>